import React, { useEffect, useState } from 'react'
import { Button,Pagination, Table, Tag, Space } from 'antd';
import ajax from '../../api/request'
import MyToast from './components/toast'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    render: (text:any) => <a>{text}</a>,
  },
  {
    title: '姓名',
    dataIndex: 'username',
    key: 'username',
  },
  {
    title: '时间',
    dataIndex: 'createTime',
    key: 'createTime',
  },
  {
    title: '身份',
    key: 'userId',
    dataIndex: 'useId',
    render: (tags: any) => (
      <>
        {/* {tags.map((tag:any) => {
          let color = tag.length > 5 ? 'geekblue' : 'green';
          if (tag === 'loser') {
            color = 'volcano';
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          );
        })} */}
      </>
    ),
  },
  {
    title: 'Action',
    key: 'action',
    render: (text:any, record:any) => (
      <Space size="middle">
        <a>Invite {record.name}</a>
        <a>Delete</a>
      </Space>
    ),
  },
];


const Blogs = () => {
  // 1. 请求数据存储数据
  const [tableData, setTableData] = useState<any[]>([])
  // 2. 存储 设置 当前页面
  const [page, setPage] = useState<number>(1)
  // 3. 存储 设置 当前size
  const [size, setSize] = useState<number>(5)
  // 4. 存储 设置 总条数
  const [total, setTotal] = useState<number>(0)
  // 4. loading弹出框
  const [loading, setLoading] = useState(false)
  // 5. loading提示文字设置 存储
  const [text, setText] = useState<string>('')

  useEffect(() => {
    getTableData({page, size})
  }, [page, size, total])

  // 定义请求数据函数
  const getTableData = async ({page, size} : {page?: number, size?: number}) => {
    setLoading(true)
    const response = await ajax.get('/api/user', {
      params: {page, size}
    })
    console.log('后台数据:....:', response)
    if (response.data.data && response.data.data.length) {
      setLoading(false)
      const data = response.data;
      data.data.forEach((item:any, index:number) => {
        item.key = index + 1
      })
      setTableData(tableData => data.data)
      setTotal(total => data.total)
    } else {
      console.log('没有数据了')
      setText('数据到底了')
      // 关闭弹出框
      setTimeout(() => {
        setLoading(false)
      }, 3000);
    }
  }

  // 点击分页的回调函数
  const handlePageChange = (val: number) => {
    console.log('val', val)
    // 设置page
    setPage(val)
  }

  // size变化回调函数
  const onShowSizeChange = (page: number, size:number) => {
    console.log('page...:', page, 'size:....', size)
    // 设置每页码显示多少条
    setSize(size)
  }

  return <div>
    {
      loading ? <MyToast message={text}/> : (<>
        <Table
          columns={columns}
          dataSource={tableData}
          pagination={false}
        />
        <Pagination
          showSizeChanger
          defaultCurrent={page}
          current={page}
          total={total}
          showQuickJumper
          onChange={handlePageChange}
          pageSizeOptions={['5', '10', '15']}
          onShowSizeChange={onShowSizeChange}
          />
      </>)
    }


  </div>
}

export default Blogs;
